<template>
	<!-- 上传组件 -->
	<view>
		<!--  :max-size="5 * 1024 * 1024" -->
		<u-upload :action="action"  :max-count="maxCount" :custom-btn="true" :file-list="fileList" @on-success="setStr" v-if="formDataFlag" 
		ref="upload" :show-progress="!disabled"  :deletable="!disabled" :max-size="5 * 1024 * 1024" @on-remove="setStr" @on-uploaded="uploaded" @on-choose-complete="change">
			<view slot="addBtn" v-if="!disabled" class="add-btn" :style="{backgroundColor:bgColor}" >
				<u-icon name="tianjiahaoyou" custom-prefix="index-custom-icon" size="60"></u-icon>
			</view>
		</u-upload>
	</view>
</template>

<script>
	import {randomString} from '@/api/updataFile.js'
	import {baseUrl} from '@/utils/config.js'
	export default {
		data() {
			return {
				action:'third/oss/uploadImage',
				ossFormDataList:[],
				formDataFlag:false,
				formData:{},
				fileList:[]
			};
		},
		props: {
			maxCount: {
				type: [Number,String],
				default: 9
			},
			bgColor:{
				type:String,
				default:'#1F1B34'
			},
			list:{
				type:String,
				default:''
			},
			disabled:{
				type:Boolean,
				default:false
			}
		},
		async created(option) {
			// try{
			// 	await this.$store.dispatch('getOss');
				
			// 	this.oss = this.$store.getters.oss;
			// 	this.formData = {
			// 		...this.oss,
			// 		OSSAccessKeyId: this.oss.accessKeyId,
			// 		success_action_status: "200"
			// 	}
			// 	setTimeout(()=>{
			// 		this.formDataFlag = true;
			// 		console.log(this.formData)
			// 	},100)
			// }catch(e){
			// 	console.log(e)
			// 	//TODO handle the exception
			// }
			this.action = `${baseUrl}/${this.action}`;
			this.formDataFlag = true;
			if(this.list) this.fileList = this.list.split(',').map(val=>{
				const url = this.imgFilter(val,false);
				return {url}
			})
		},
		methods: {
			//调用自身方法
			setStr(){
				const str = this.$refs.upload.lists.map(val=>val.response&&val.response.data || val.url).join(',');
				this.$emit('getImgStr',str)
			},
			//上传完成
			uploaded(){
				this.$emit('uploaded',true)
			},
			//上传中
			change(){
				this.$emit('uploaded',false)
			}
		},
	}
</script>

<style lang="scss" scoped>
.add-btn{
	width: 210rpx;
	height: 210rpx;
	display:  flex;
	align-items: center;
	justify-content: center;
	border-radius: 17rpx;
}
</style>
